<template>
  <el-container>
    <el-header>
      <!-- <span>评估后台管理系统</span> -->
    </el-header>
    <el-main>
      <el-dialog title="登录" :center="true" :visible.sync="dialogFormVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" width="40%">
        <el-form :model="loginForm" :rules="loginRules" ref="loginForm" class="form">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" auto-complete="off" @keyup.enter.native="loginMethod()" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="loginForm.password" @keyup.enter.native="loginMethod()" auto-complete="off" placeholder="
    请输入登录密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="loginMethod()" :loading="logining" style='width:100%'>登录</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
import { loginApi } from "@utils/apis";
import Tools from "@utils/tools";

export default {
  data() {
    return {
      dialogFormVisible: true,
      logining: false,
      loginForm: {
        mobile: '',
        password: ''
      },
      loginRules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
        ]
      }
    }
  },

  methods: {
    loginMethod(formName) {
      this.$refs['loginForm'].validate((valid) => {
        if (!valid)
          return false
        this.logining = true
        loginApi(this.loginForm).then(res => {
          let {
            code,
            message,
            result,
          } = res
          this.logining = false
          if (code == '000') {
            this.$store.commit('LOG_IN', result)
            setTimeout(() => {
              this.$router.push({ name: 'projectList' })
            }, 100)
            return
          }
          this.$message({
            showClose: true,
            message,
            type: 'error'
          })
        })
      })
    },
  }

}

</script>
<style scoped>


</style>
